<template>
  <div>
    <div v-for="tv in TV_data" :key="tv.id">
      <div class="recommend-item recommend-first" v-if="tv.type === 1">
        <a href="">
          <div class="recommend-item-hd">
            <span>
              <i class="iconfont icon-youji"></i>
              来自
              <strong>{{ tv.from }}</strong>
            </span>
            <span class="stat">
              <span>152</span>
              峰峰顶
              <i class="iconfont icon-zan shopcar"></i>
            </span>
          </div>
          <div class="title">
            {{ tv.title }}
          </div>
          <div class="recommend-item-content">
            <div class="left-image">
              <img :src="tv.picUrl" alt="" />
            </div>
            <div class="right-text">
              {{ tv.text }}
              <div class="ext-r">
                <span class="author">
                  <img :src="tv.headP" alt="" />
                  {{ tv.author }}
                </span>
                <span>{{ tv.comment }}</span>
              </div>
            </div>
          </div>
        </a>
      </div>
      <div class="recommend-item" v-else>
        <a href="">
          <div class="recommend-item-hd">
            <span>
              <i class="iconfont icon-ziyuan13"></i>
              来自
              <strong>{{ tv.from }}</strong>
            </span>
            <span class="stat">
              <span>152</span>
              峰峰体验过
              <i class="iconfont icon-xiazai1 dianzan"></i>
            </span>
          </div>
          <div class="title">
            {{ tv.title }}
          </div>
          <div class="txt">
            <div class="info">
              {{ tv.text }}
            </div>
          </div>
          <div class="imgs">
            <ul>
              <li>
                <img :src="tv.imgs.picUrl1" alt="" />
              </li>
              <li>
                <img :src="tv.imgs.picUrl2" alt="" />
              </li>
              <li>
                <img :src="tv.imgs.picUrl3" alt="" />
              </li>
              <li class="ext-r">{{ tv.browse }}</li>
            </ul>
          </div>
        </a>
      </div>
      <div class="hr"></div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "Travels",

  mounted() {
    this.getIntroduction();
  },
  computed: {
    ...mapState("Travels", ["TV_data"]),
  },
  methods: {
    ...mapActions("Travels", ["getIntroduction"]),
  },
};
</script>

<style >
.recommend {
  width: 790px;
}
.recommend a {
  display: block;
}
.recommend-item {
  height: 290px;
  margin-top: 10px;
}
.recommend-first {
  height: 230px;
}
.recommend .recommend-item-hd {
  display: flex;
  justify-content: space-between;
}
.recommend-item-hd strong {
  color: #ff9d00;
}
.recommend .recommend-item-hd .stat {
  display: inline-block;
  border-radius: 15px;
  /* width: 206px; */
  height: 32px;
  line-height: 32px;
  padding-left: 5px;
  font-size: 14px;
  border: 1px solid rgb(248, 104, 8);
}
.recommend .title {
  margin-bottom: 15px;
  font-size: 20px;
  color: #333;
}
.left-image {
  width: 220px;
  height: 150px;
  background-color: grey;
}
.recommend-item-content {
  display: flex;
  justify-content: space-between;
}
.hr {
  margin-top: 20px;
  height: 1px;
  background-color: #e5e5e5;
  overflow: hidden;
}
.shopcar {
  color: #ff9d00;
}
.dianzan {
  color: #ff9d00;
}
a:hover {
  text-decoration: none;
}
</style>